<!DOCTYPE html>
<html>
    <head>
        <title>FutureMesh Map Editor 1.0</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="mapeditor/ui.css" media="all" />
        <link rel="stylesheet" type="text/css" href="mapeditor/uicomponents.css" media="all" />
        <!-- complete futuremesh engine -->
        <script type="text/javascript" src="futuremesh.js"></script>
        <!-- data -->
        <script type="text/javascript" src="data/buildingsdefinition.js"></script>
        <script type="text/javascript" src="data/playersdefinition.js"></script>
        <script type="text/javascript" src="data/settings.js"></script>
        <script type="text/javascript" src="data/tilesdefinition.js"></script>
        <script type="text/javascript" src="data/unitsdefinition.js"></script>
        <!-- mapeditor application -->
        <script type="text/javascript" src="mapeditor/ajax.js"></script>
        <script type="text/javascript" src="mapeditor/alert.js"></script>
        <script type="text/javascript" src="mapeditor/confirm.js"></script>
        <script type="text/javascript" src="mapeditor/filechooser.js"></script>
        <script type="text/javascript" src="mapeditor/formbuilder.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditorbrush.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditormainmenu.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditormouse.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditorpallets.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditorview.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditorviewui.js"></script>
        <script type="text/javascript" src="mapeditor/modal.js"></script>
        <script type="text/javascript" src="mapeditor/progressbar.js"></script>
        <script type="text/javascript" src="mapeditor/prompt.js"></script>
        <script type="text/javascript" src="mapeditor/mapeditor.js"></script>
    </head>
    <body>
        <div class="body">
            <ul id="menu">
                <li id="menu-newmap">New map</li>
                <li id="menu-save" class="disabled">Save map</li>
                <li id="menu-save-as">Save map as...</li>
                <li id="menu-load">Load map</li>
                <li id="menu-import">Import map</li>
                <li id="menu-export">Export map</li>
            </ul>
            <div id="view">
                <div id="viewmap">
                    <div class="canvas-container"><canvas id="terrain" width="800" height="600"></canvas></div>
                    <div class="canvas-container"><canvas id="buildings" width="800" height="600"></canvas></div>
                    <div class="canvas-container"><canvas id="units" width="800" height="600"></canvas></div>
                    <canvas id="sfx" width="800" height="600"></canvas>
                </div>
                <div id="v-scroll-container">
                    <input id="v-scroll" type="range" min="0" max="1" step="0.001" value="0" />
                </div>
                <input id="h-scroll" type="range" min="0" max="1" step="0.001" value="0" />
                <div id="view-resize">
                    <div>
                        <div></div>
                    </div>
                </div>
            </div>
            <div id="tool-modes">
                <span id="tool-mode-add" class="selected" title="Add new building/unit"></span>
                <span id="tool-mode-edit" title="Edit building/unit"></span>
                <span id="tool-mode-delete" title="Delete building/unit"></span>
            </div>
            <div id="palette">
                <label>
                    <span>Terrain tiles</span> <input type="radio" name="pallete-group" checked="" />
                    <span id="palette-terrain"></span>
                </label>
                <label>
                    <span>Buildings</span> <input type="radio" name="pallete-group" />
                    <span id="palette-buildings"></span>
                </label>
                <label>
                    <span>Units</span> <input type="radio" name="pallete-group" />
                    <span id="palette-units"></span>
                </label>
                <label>
                    <span>SFX</span> <input type="radio" name="pallete-group" />
                    <span id="palette-sfx"></span>
                </label>
            </div>
            <div class="clear"></div>
            <div id="bottom-panel">
                <label title="Toggle terrain view"><input type="checkbox" checked="" id="terrain-toggle" /><span>T</span></label>
                <label title="Toggle buildings view"><input type="checkbox" checked="" id="buildings-toggle" /><span>B</span></label>
                <label title="Toggle units view"><input type="checkbox" checked="" id="units-toggle" /><span>U</span></label>
                <label title="Toggle SFX view"><input type="checkbox" checked="" id="sfx-toggle" /><span>S</span></label>
                <label title="Toggle viewing tiles free for buildings"><input type="checkbox" id="buildable-toggle" /><span>Ba</span></label>
                <label title="Toggle viewing tiles free for units"><input type="checkbox" id="passable-toggle" /><span>Pa</span></label>
                <span id="mouse"></span>
            </div>
        </div>
    </body>
</html>
